<template>
	<div id="index" >
		<div id="banner" class="carousel slide" data-ride="carousel">
			 <!-- 指示符 -->
			<ul class="carousel-indicators">
				<li data-target="#index" data-slide-to="0" class="active"></li>
				<li data-target="#index" data-slide-to="1"></li>
				<li data-target="#index" data-slide-to="2"></li>
			</ul>
			 
			<!-- 轮播图片 -->
			<center>{{ this.$route.query.classify }}</center>
			<div class="carousel-inner">
				<div class="carousel-item active">
				  <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
				</div>
				<div class="carousel-item">
				  <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
				</div>
				<div class="carousel-item">
				  <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
				</div>
			</div>
			 
			<!-- 左右切换按钮 -->
			<a class="carousel-control-prev" href="#index" data-slide="prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
			<a class="carousel-control-next" href="#index" data-slide="next">
				<span class="carousel-control-next-icon"></span>
			</a>
		</div>
		<div class="container mt-3">
		  <p> .btn-group 类用于创建按钮组:</p>
		  <div class="btn-group">
			<button type="button" class="btn btn-primary">Apple</button>
			<button type="button" class="btn btn-primary">Samsung</button>
			<button type="button" class="btn btn-primary">Sony</button>
		  </div>
		  <hr  />
		  <h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
		  <h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
		  <h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
		  <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
		  <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
		  <h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
		  <hr />
		  <h2>代表指定意义的文本颜色</h2>
		  <p class="text-muted">柔和的文本。</p>
		  <p class="text-primary">重要的文本。</p>
		  <p class="text-success">执行成功的文本。</p>
		  <p class="text-info">代表一些提示信息的文本。</p>
		  <p class="text-warning">警告文本。</p>
		  <p class="text-danger">危险操作文本。</p>
		  <p class="text-secondary">副标题。</p>
		  <p class="text-dark">深灰色文字。</p>
		  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
		  <p class="text-white">白色文本（白色背景上看不清楚）。</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'index',
		data(){
			return{
				
			}
		}
	}
</script>

<style scoped="scoped">
	img{
		width: 100%;
		height: 290px;
	}
</style>